@import './../../library/style/phone_global.scss';

html,body,#app,.lifeservices-wrap {
  height: 100%;
}
.lifeservices-wrap {
  background-color: #F6F6F6;
  .lifeservices-hint {
    width: 100%;
    height: 0.46rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 0.15rem;
    background-color: #fdf7eb;
    font-size: 0.22rem;
    color: #f4b858;
    line-height: 1;
    .lifeservices-hint-img {
      width: 0.185rem;
      height: 0.185rem;
      margin-right: 0.1rem;
      background-image: url('./../../images/tishi-info.png');
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }
    .lifeservices-hint-info {
      flex: 1;
      line-height: 1;
    }
    .lifeservices-hint-delete {
      width: 0.11rem;
      height: 0.11rem;
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      background-image: url("./../../images/delete-1.png");
      line-height: 1;
      cursor: pointer;
    }
  }
}
.lifeservices-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  height: 0.5rem;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0 0.15rem;
  background-color: #FFFFFF;
  .lifeservices-header-left {
    display: flex;
    margin-right: 0.1rem;
    .left-img {
      width: 0.09rem;
      height: 0.17rem;
      margin-right: 0.05rem;
      @include background-image-wrap('./../../images/header_left.png');
    }
    .left-text {
      margin-left: 0.05rem;
      font-size: 0.16rem;
      color: #999999;
      line-height: 1;
    }
  }
  .header-wrap-center {
    font-size: 0.16rem;
    color: #212121;
    line-height: 1;
  }
  .lifeservices-header-right {
    flex: 1;
    display: flex;
    align-items: center;
    padding-left: 0.1rem;
    height: 0.35rem;
    border: 0.01rem solid #EEEEEE;
    border-radius: 0.15rem;
    .header-right-img {
      width: 0.12rem;
      height: 0.12rem;
      margin-right: 0.06rem;
      @include background-image-wrap('./../../images/search-1.png');
    }
    .header-right-text {
      line-height: 1;
      font-size: 0.12rem;
      color: #999999;
    }
  }
}

.lifeservices-apps {
  width: 100%;
  padding: 0.2rem 0.15rem 0.05rem;
  background-color: #FFFFFF;
  .lifeservices-apps-title {
    font-size: 0.17rem;
    color: #212121;
    line-height: 1;
    margin-bottom: 0.15rem;
  }
  .lifeservices-apps-list {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: auto;
    grid-row-gap: 0.11rem;
    .apps-list-item {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .list-item-img {
      width: 0.34rem;
      height: 0.34rem;
      margin-bottom: 0.10rem;
      background-repeat: no-repeat;
      background-size: cover;
    }
    .list-item-text {
      text-align: center;
      font-size: 0.13rem;
      line-height: 1;
      color: #212121;
    }
  }
}
.lifeservices-firstapps {
  padding: 0.6rem 0.15rem 0.2rem;
  margin-bottom: 0.15rem;
}
.clone-lifeservices {
  position: fixed;
  left: 0px;
  top: 0.5rem;
  z-index: 99;
  width: 100%;
  .lifeservices-body-navs {
    white-space: nowrap;
  }
}
.lifeservices-body {
  padding-top: 0.15rem;
  background-color: #FFFFFF;
}
.lifeservices-body-navs {
  width: 100%;
  padding: 0px 0.15rem;
  overflow: auto;
  background-color: #FFFFFF;
  .body-navs-container {
    height: 100%;
    overflow: hidden;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .navs-item:not(last-of-type) {
    margin-right: 0.25rem;
  }
  .navs-item {
    position: relative;
    padding: 0.08rem 0;
    display: inline-block;
    overflow: hidden;
    color: #212121;
    font-size: 0.15rem;
    line-height: 1;
    white-space:nowrap;
  }
  .navs-actionItem:after {
    content: ' ';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0.05rem;
    right: 0.05rem;
    height: 0.02rem;
    border-radius: 0.01rem;
    background-color: #6199F0;
  }
}

.lifeservices-body-content {
  padding-bottom: 0.32rem;
  .lifeservices-apps:first-of-type {
    .lifeservices-apps-title {
      display: none;
    }
  }
}
